<template>
	<div id="pages">
		      <el-main>
            <div id="sousuo">
              <el-form :inline="true" :model="searchObj" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="订单编号">
                  <el-input v-model="searchObj.orderNumber" placeholder="请输入订单编号" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" round @click="QueryAllOrder">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>

		<el-table :data="AllOrder" style="width: 100%">
      <el-table-column prop="orderId" label="订单ID" width="180">
      </el-table-column>
		  <el-table-column prop="createTime" label="日期" width="180">
		  </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
		  <el-table-column prop="orderNumber" label="订单号" width="180">
		  </el-table-column>
		  <el-table-column prop="totalPrice" label="总价格" width="180">
		  </el-table-column>
      <el-table-column
          label="订单进度">
        <template slot-scope="scope">
          <span v-if="scope.row.conveyTag== 'P001-1'">待付款</span>
          <span v-else-if="scope.row.conveyTag== 'P001-2'" style="color: darkorange">待发货</span>
          <span v-else-if="scope.row.conveyTag== 'P001-3'" style="color: blue">待收货</span>
          <span v-else-if="scope.row.conveyTag== 'P001-7'" style="color: blue">待提货</span>
          <span v-else-if="scope.row.conveyTag== 'P001-5'" style="color: green">已完成</span>
          <span v-else-if="scope.row.conveyTag== 'P001-6'" style="color: black">已取消</span>
        </template>
      </el-table-column>


		  <el-table-column prop="payMethod" label="支付方式" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.payMethod=='P002-1'">余额支付</span>
          <span v-if="scope.row.payMethod=='P002-2'">微信支付</span>
          <span v-if="scope.row.payMethod=='P002-3'">现金支付</span>
        </template>
		  </el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
			  <template slot-scope="scope">
				<el-button
            size="small"
            type="warning"
            round
            icon="el-icon-edit"
					@click="viewBtn(scope.row.orderId)">查看</el-button>
			  </template>
			</el-table-column>
		 </el-table>

		 <!-- 分页组件-->
			 <el-pagination
			   @size-change="handleSizeChange"
			   @current-change="handleCurrentChange"
			   :current-page="pageNo"
			   :page-sizes="pageSizeList"
			   :page-size="pageSize"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="total">
			 </el-pagination>
            <!-- 查看详情框 -->
<!--            <el-dialog title="查看详情" :visible.sync="viewVisible" >-->
<!--              <el-form :model="viewForm">-->
<!--                <el-form-item label="日期" :label-width="formLabelWidth">-->
<!--                  <el-date-picker-->
<!--                      v-model="viewForm.createTime"-->
<!--                      type="datetime"-->
<!--                      value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                      placeholder="选择日期" :disabled="true">-->
<!--                  </el-date-picker>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="姓名" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="viewForm.name" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="订单号" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="viewForm.orderNumber" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="总价格" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="viewForm.totalPrice" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="支付状态" :label-width="formLabelWidth">-->
<!--                  <el-select v-model="viewForm.conveyTag" :disabled="true">-->
<!--                    <el-option :value="'P001-1'" label="待付款"></el-option>-->
<!--                    <el-option :value="'P001-2'" label="待发货"></el-option>-->
<!--                    <el-option :value="'P001-3'" label="待收货"></el-option>-->
<!--                    <el-option :value="'P001-4'" label="已发货"></el-option>-->
<!--                    <el-option :value="'P001-5'" label="已完成"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="支付方式" :label-width="formLabelWidth">-->
<!--                  <el-select v-model="viewForm.payMethod" :disabled="true">-->
<!--                    <el-option :value="'P002-1'" label="余额支付"></el-option>-->
<!--                    <el-option :value="'P002-2'" label="微信支付"></el-option>-->
<!--                    <el-option :value="'P003'" label="现金支付"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->

<!--              </el-form>-->
<!--            </el-dialog>-->
            <el-dialog title="支付订单" :visible.sync="viewVisible">
            <el-table :data="viewFormDetails" style="width: 100%">
              <!-- 表格列 -->
              <el-table-column prop="orderInfo.orderId" label="订单id"></el-table-column>
              <el-table-column prop="sysUsers.nickName" label="下单用户"></el-table-column>
              <el-table-column prop="orderInfo.createTime" label="日期" width="180"></el-table-column>
              <el-table-column prop="orderInfo.orderNumber" label="订单编号" width="180"></el-table-column>
              <el-table-column prop="name" label="商品名称"></el-table-column>
              <el-table-column prop="orderDetails.amount" label="数量"></el-table-column>
              <el-table-column prop="orderDetails.price" label="单价"></el-table-column>
              <el-table-column prop="orderDetails.subtotal" label="小计"></el-table-column>
              <!--          <el-table-column  label="支付状态" width="180"></el-table-column>-->

            </el-table>
            </el-dialog>

			 </el-main>

	</div>
</template>

<script>
	export default{
		name: 'pages',
		data() {
			return{
			  //用户ID
        sysUsersId:'',
			  //表单查询条件
        searchObj: {
          name: '',
          orderNumber: ''
        },

        AllOrder:[],
						// 当前页号
        pageNo: 1,
						// 当前页大小
						pageSize: 5,
						// 总记录数
						total: 0,
						// 页大小列表
						pageSizeList: [2, 5, 10, 20],
        // 查看框的显示
        viewVisible: false,
        // lable宽度
        formLabelWidth: '120px',
        //对话框表单
        viewForm: {

        },
        viewFormDetails:[],
			}
		},
		methods:{
		  //表单条件查询
      QueryAllOrder() {
        // 查询
        this.pageNo = 1
        this.awaitOrderListPage()
      },
      // 页大小改变
				  handleSizeChange(val) {
					  this.pageSize = val
					  this.awaitOrderListPage()
				  },
      // 页号改变
				  handleCurrentChange(val) {
					this.pageNo = val
            //重新查询
            this.awaitOrderListPage()
		      },
      // 显示查看详情框
      async  viewBtn(id) {
        const {data: res} = await this.$http.post(`orderDetails/OrderDate/${id}`);
        this.viewFormDetails = res
        console.log("2222222222",res)
        this.viewVisible = true;
        this.total=res.total
      },
      //全部订单
        async awaitOrderListPage(){
          this.sysUsersId=this.$store.state.user.sysUsersId
          console.log('全部sysUsersId',this.sysUsersId)
          const {data: res} = await this.$http.post(`orderInfo/allMerchantHubListPage/${this.pageNo}/${this.pageSize}/${this.sysUsersId}`,this.searchObj)
          this.AllOrder=res.list
          console.log(res.list)
          this.total=res.total
        },


		},
    created() {
      this.awaitOrderListPage()
    }
  }
</script>

<style>

</style>